<template>
    <div>
        <el-table :key="tableKey" :data="list" ref="multipleTable" border highlight-current-row style="width: 100%">
            <el-table-column align="left" label="发件人" width="220px" :show-overflow-tooltip="true">
                <template scope="scope">
                    <span>{{ scope.row.sender }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="主题" :show-overflow-tooltip="true" min-width="400px">
                <template scope="scope">
                    <span class="link-type" @click="goToDetail(scope.row)">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sendDate" align="center" label="接收时间" width="160px">
                <template scope="scope">
                    <span>{{ scope.row.sentDate }}</span>
                </template>
            </el-table-column>
        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { list } from "@/api/mail";
import utils from "@/utils/utils";
export default {
    data() {
        return {
            list: null,
            total: null,
            listLoading: true,
            listQuery: {
                current: 1,
                size: 20,
                projId: "",
            },
            multipleSelection: [],
            tableKey: 0,
            labelList: [],
        };
    },
    created() {},
    props: ["projId"],
    watch: {
        projId: {
            handler(newVal, oldVal) {
                this.listQuery.projId = newVal;
                this.getList();
            },
            deep: true,
            immediate: true,
        },
    },
    filters: {},
    methods: {
        getList() {
            this.listLoading = true;
            list(this.listQuery).then((response) => {
                response.data.mailInfos.forEach((element) => {
                    element.sentDate = utils.dateFormat(element.sentDate);
                });
                this.list = response.data.mailInfos;
                this.total = response.data.total;
                this.listLoading = false;
            });
        },
        handleSizeChange(val) {
            this.listQuery.size = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.current = val;
            this.getList();
        },
        goToDetail(item) {
            let data = {
                orders: item.orders,
                projId: this.projId,
            };
            this.$router.push({ path: "/mailDetails", query: data });
        },
    },
};
</script>
<style scoped>
/deep/ .el-table th.el-table__cell.is-sortable {
    background-color: #eef1f6;
    color: #1f2d3d;
}
/deep/ .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
    background-color: #eef1f6;
    color: #1f2d3d;
}
</style>